<template>
  <view class="home flex column">
    <u-navbar :title-bold="true" title="公告通知" back-icon-color="#fff" title-color="#fff"
      :background="{ backgroundColor: 'rgb(61, 95, 255)' }">
    </u-navbar>

    <!-- 列表 -->
    <scroll-view :scroll-y="true" class="item one" refresher-enabled="true" :refresher-triggered="triggered"
      :refresher-threshold="50" refresher-background="#F5F5F5" @refresherrefresh="onRefresh" @refresherabort="onAbort"
      @scrolltolower="onScrollToLower">
      <template v-if="list && list.length">
        <u-card v-for="(item, index) in list" :key="index" :border="false" box-shadow="0px 0px 8px #ddd6d6"
          :body-style="{ padding: '0 44rpx 14rpx' }" :head-style="{ padding: '10rpx 30rpx' }" margin="20rpx 32rpx"
          class="card" :head-border-bottom="false" @click="handleClick(item)">
          <view slot="body">
            <view class="card-read" v-show="item.isRead === '0'"></view>
            <view class="card-title">
              {{ item.title }}
            </view>
            <view class="card-time">{{ item.releaseTime }}</view>
          </view>
        </u-card>
        <view class="p-t-10 p-b-10">
          <u-loadmore :status="status" />
        </view>
      </template>
      <template v-if="showEmpty">
        <view class="c-empty p-absolute-center">
          <u-empty text="暂无数据"></u-empty>
        </view>
      </template>
    </scroll-view>

  </view>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
      searchData: {
        pageSize: 20,
        pageNumber: 1
      },
      list: [],
      triggered: false,
      showEmpty: false,
      status: 'loading',
    }
  },
  onShow () {
    this.getData()
  },
  methods: {
    async getData () {
      const res = await this.$post('/notice/announce/mobile/dataList', this.searchData)
      if (res && res.body.content) {
        this.list = this.searchData.pageNumber === 1 ? res.body.content : this.list.concat(res.body.content)
        // 到底了
        if (res.body.content.length < this.searchData.pageSize) {
          this.status = 'nomore'
        }
        // 数据空
        if (this.searchData.pageNumber === 1 && this.list && this.list.length === 0) {
          this.showEmpty = true
        } else {
          this.showEmpty = false
        }
      }
    },
    onScrollToLower () {
      if (this.status === 'loading') {
        this.searchData.pageNumber++
        this.getData()
      }
    },
    onRefresh () {
      if (this.Isfreshing) return
      this.Isfreshing = true
      if (!this.triggered) {
        // 保证刷新状态下，triggered为true
        this.triggered = true
        this.searchData.pageNumber = 1
        this.getData()
        setTimeout(() => {
          this.triggered = false // 触发onRestore，关闭刷新图标
          this.Isfreshing = false
        }, 200)
      }
    },
    handleClick (item) {
      uni.navigateTo({
        url: `./detail?id=${item.id}`,
      });
    }
  },
}
</script>

<style lang="scss" scoped>
.home {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;

  .card-read {
    position: absolute;
    top: 28rpx;
    left: 20rpx;
    width: 16rpx;
    height: 16rpx;
    border-radius: 16rpx;
    background-color: #f00;
  }

  .card-title {
    color: #333;
    font-size: 24rpx;
    margin-bottom: 5rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .card-time {
    font-size: 20rpx;
    color: #999;
  }
}
</style>
